<template>
    <NewCard :title="citytitle" :isright="true">
     
        <template #right>
            <el-input placeholder="服务项目"  v-model="filterText" style="margin-right:10px;"></el-input>
            <el-button type="primary" class="defaultBtn" @click="search(filterText)" round>搜索</el-button>
        </template>
        <div class="projectList-box">
            <h3>
                <p>项目名称</p>
                <p>专家数</p>
            </h3>
            <el-tree class="filter-tree" ref="tree"  :filter-node-method="filterNode" :data="projectdata" :props="defaultProps">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="tree-add"  :class="data.children?'':'is-leaf'"><svg-icon icon-class="add-icon" /></span>
                <span class="tree-minus" :class="data.children?'':'is-leaf'"><svg-icon icon-class="minus-icon" /></span>
                <span>{{ node.label }}</span>
                <span>{{data.closedThan}} <span v-if="!data.children">{{data.expertNum}}</span></span>

              </span>
            </el-tree>
        </div>
    </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import { getprojectTypeApi} from "../../../newApi_3-24/BK/aricereview/city";

export default {
   props:['projectdata','citytitle'],
    name:'projectList',
    components:{NewCard},

    data(){
        return{
          title:"",
          filterText: '',
            // 树形结构
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            // 项目列表内容
            projectList:[
                // {
                // name:'财务',
                // children:[
                //     {
                //     name:'工商更改',
                //     children:[
                //         {name:'普通公司注册',closedThan:'10'},
                //         {name:'外资公司注册',closedThan:'10'},
                //         {name:'营业执照办理',closedThan:'10'},
                //     ],
                //     },
                //     {name:'公司注册'},
                //     {name:'公司注销'},
                // ],
                // },
                // {
                // name:'法务',
                // children:[
                //     {name:'工商更改',},
                //     {
                //     name:'公司注册',
                //     children:[
                //         {name:'普通公司注册',closedThan:'10'},
                //         {name:'外资公司注册',closedThan:'10'},
                //         {name:'营业执照办理',closedThan:'10'},
                //     ],
                //     },
                //     {name:'公司注销'},
                // ],
                // },
                // {
                // name:'税务',
                // children:[
                //     {name:'工商更改',},
                //     {name:'公司注册',},
                //     {
                //     name:'公司注销',
                //     children:[
                //         {name:'普通公司注册',closedThan:'10'},
                //         {name:'外资公司注册',closedThan:'10'},
                //         {name:'营业执照办理',closedThan:'10'},
                //     ],
                //     },
                // ],
                // },
            ],
        }
    },
    mounted(){
      this.title=this.projectdata.city
    },
     created(){
    this.getprojectTypeApiFn();
  },
   watch: {
      // filterText(val) {
      //   this.$refs.tree.filter(val);
      // }
    },
    methods:{
       filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
       async getprojectTypeApiFn() {
      let { code, rows, total } = await getprojectTypeApi(this.pageing);
      if (code != 200) return;
      this.projectList = JSON.parse(JSON.stringify(rows));
      // console.log(this.operatingCity,"this.operatingCity")
    },
    search(val){
      this.$refs.tree.filter(val);
    }
    }
    
}
</script>

<style scoped>
h3,h4,ul,li,p{
  list-style: none;
  margin: 0;
  padding: 0;
}
.right .el-input{
    width: 170px;
}
.right .el-button{
    padding: 8px 20px;
    background-color: #f87a23;
    border-color: #f87a23;
}

/* 内容 */
.projectList-box h3{
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
  margin-top: 10px;
}
.projectList-box h3>p:nth-child(1){
    width: 60%;
}
.projectList-box h3>p:nth-child(2){
    width: 40%;
}

/* 树形结构 */
::v-deep .el-tree {
  /* height: 100%; */
  padding-top: 10px;
  margin-bottom: 60px;
  /* overflow: scroll; */
}
::v-deep .el-tree::-webkit-scrollbar{
  width: 0px;
}
::v-deep .el-tree .is-expanded{
  position: relative;
}
::v-deep .el-tree .is-expanded::before{
  content: '';
  position: absolute;
  top: 18px;
  left: 8px;
  display: block;
  width: 1px;
  height: 100%;
  background-color: #EBEBEB;
}
::v-deep .el-tree .tree-add,
::v-deep .el-tree .tree-minus{
  position: relative;
  margin-right: 7px;
  font-size: 16px;
  z-index: 1;
}
::v-deep .el-tree .el-tree-node__children .tree-add.is-leaf,
::v-deep .el-tree .el-tree-node__children .tree-minus.is-leaf{
  opacity: 0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-add,
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .tree-minus{
  opacity: 0;
  margin-right:0;
}
::v-deep .el-tree .el-tree-node__children .el-tree-node__children .el-tree-node__content{
  padding-left: 43px!important;
  width: 100%;
}
::v-deep .el-tree .tree-minus{
  display: none;
}
::v-deep .el-tree .is-expanded>.el-tree-node__content>span>.tree-add{
  display: none;
}
::v-deep .el-tree .is-expanded>.el-tree-node__content>span>.tree-minus{
  display: inline-block;
}

::v-deep .el-tree .custom-tree-node{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
::v-deep .el-tree .custom-tree-node>span:last-child{
    width: 40%;
    margin-left: auto;
}

::v-deep .el-tree .el-tree-node__content > .el-tree-node__expand-icon{
  padding: 0;
}
::v-deep .el-tree .is-expanded .is-expanded::before{
  left: 25px;
}
::v-deep .el-tree .el-tree-node__content{
  height: 46px;
  line-height: 46px;
}
::v-deep .el-tree .el-icon-caret-right:before{
  display: none;
}
::v-deep .el-tree-node__expand-icon.expanded{
  transform: rotate(0deg);
}
::v-deep .el-tree .el-icon-caret-right.is-leaf{
  opacity: 0;
}
</style>